<template>
    <div class="add_box">
        <input v-model="addText" @keydown.enter="onAddText" type="text">
        <button @click="onAddText">添加</button>
    </div>
</template>

<script>
export default {
    name: "addInput",
    data(){
        return {
            addText:""
        }
    },
    methods:{
        onAddText(){
            //去掉当前输入内容的左右空格
            let str = this.addText.trim();
            //清空原始数据
            this.addText = "";
            if(!str) return alert("请输入有效信息");

            console.log(str);
            //通过事件总线发送参数str
            this.$bus.$emit("onAddItem", str)

        }
    }
}
</script>

<style scoped>
.add_box {
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.add_box input {
    width: 200px;
    height: 30px;
}

.add_box button {
    margin-left: 10px;
    width: 50px;
    height: 30px;
}
</style>